<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-html -->
        <div v-html="msg"></div>
        <!-- v-show  切换display来控制显示隐藏
                    适合频繁得切换显示隐藏
             v-if    根据判断条件控制元素的创建和移除 
                    要么显示要么隐藏
        -->
        <div v-show="flag1" class="box">我是v-show控制的盒子</div>
        <div v-if="flag2" class="box">我是v-if控制的盒子</div>
     </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{ 
                msg:`<a href="https://www.baidu.com/index.htm">百度网页</a>`,
                flag1:false,
                flag2:true
            } 
        })
    </script>
</body> 
</html>